import { useSelector } from 'react-redux'
import { ConfigProvider, Layout, theme } from 'antd'
import { Navigate, Outlet } from 'react-router'
import { globalConfig } from '@/globalConfig'
import Sider from '@/components/sider'
import Header from '@/components/header'

const { darkAlgorithm, defaultAlgorithm } = theme
const { Content } = Layout

function PrivateRoute(props) {
  return localStorage.getItem(globalConfig.SESSION_LOGIN_INFO) ? props.children : <Navigate to='/login' />
}


function Entry() {
  const globalTheme = useSelector((state) => state.theme)

  globalTheme.dark ? document.body.setAttribute('theme-mode', 'dark') : document.body.setAttribute('theme-mode', 'light')

  let antdTheme = {
    algorithm: globalTheme.dark ? darkAlgorithm : defaultAlgorithm
  }

  if(globalTheme.colorPrimary) {
    antdTheme.token = {
      colorPrimary: globalTheme.colorPrimary
    }
  }

  return (
    <PrivateRoute>
      <ConfigProvider theme={ antdTheme }>
        <Layout className='G-fullpage'>
          <Header />
          <Layout style={{ overflow: 'hidden', flex: 1 }}>
            <Sider />
            <Layout>
              <div className="G-layout-main">
                <Content style={{ minWidth: 800 }}>
                  <Outlet />
                </Content>
              </div>
            </Layout>
          </Layout>
        </Layout>
      </ConfigProvider>
    </PrivateRoute>
  )
}

export default Entry
